// 由于webpack是基于Node进行构建的，所以 webpack的配置文件中,任何合法的Node代码都是支持的
const path=require('path')
// 当以命令行形式运行webpack或webpack-dev-server的时候，工具会发现，我们并没有提供要打包
// 的文件的入口 和 出口文件，此时，会检查项目根目录中的配置文件，并读取这个文件，就会拿到
// 导出的这个配置对象，然后根据这个对象，进行打包构建
 const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, "./src/main.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js",
  },
  mode: "development",
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./src/index.html"),
      filename: "index.html",
    }),
  ],
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: "url-loader?esModule=false",
      },
      //   {
      //     test: /\.(jpg|png|gif|bmp|jpeg)$/,
      //     use: "url-loader?limit=74023&name=[hash:8]-[name].[ext]",
      //   },
      //处理图片路径的loader
      // limit给定的值，是图片的大小，单位：byte， 如果我们引用的图片，大于或等于给定
      // 的limit值，则不会被转为base64格式的字符串，如果图片小于给定的limit值，则会转为
      // base64的字符串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: "url-loader" }, //处理字体文件的loader
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ }, //配置Babel来转换高级的ES语法
      { test: /\.vue$/, use: "vue-loader" }, //出来vue文件的loader
    ],
  },
  devtool: "inline-source-map", // 加上对应的配置 devtool: 'inline-source-map',  // 加上对应的配置
  // resolve:{
  //     alias: { //修改vue被导入时的包的路径
  //         //"vue$" : "vue/dist/vue.js"
  //     }
  // }
};